<template>
  <div class="home-category">
    <!--  @mouseleave="categoryId = null" -->
    <ul class="menu">
      <!-- categoryId = item.classifyId -->
      <li v-for="item in wrapCategoryListNew" :key="item.id" @click="jumpCategory(item)" @mouseenter="mouseenter(item)">
        <!-- {{item.classifyId}} -->
        <el-link :underline="false">{{ item.classifyName }}</el-link>
        <!-- <router-link></router-link> -->
        <!-- <router-link :to="`/category/sub/${list.id}`" v-for="list in item.childs" :key="list.id"
					>
				</router-link> -->

      </li>
    </ul>
    <div>
      <div class="layer">
        <!-- <h4 v-if="currentCategory">
        {{ currentCategory.id === "brand" ? "品牌" : "分类" }} 推荐
        <small>根据您的购买或浏览记录推荐</small>
      </h4> -->
        <!-- 分类列表 secondaryList-->
        <ul>
          <div v-for="item in secondaryList.children" :key="item.classifyId">
            <!-- {{secondaryList}} -->
            <div class="flex_box">
              <h3>
                <!-- :to="`/category/sub/${list.id}`" -->
                <!-- <router-link :to="`/category/sub/${item.id}`">
					{{item.classifyName}}
				</router-link> -->
                <!-- <el-link :underline="false">{{ item.classifyName }}</el-link> -->
                <a @click="jumpCategory(item)">{{item.classifyName}}</a>
              </h3>
              <div class="flex_box_c">
                <a class="box_c_p" @click="jumpCategory(i)" v-for="i in item.children" :key="i.classifyId">
                  {{i.classifyName}}
                </a>
              </div>

            </div>
          </div>
        </ul>
        <!-- 品牌列表 -->
        <!-- <ul v-if="currentCategory && currentCategory.branks">
        <li class="brand" v-for="item in currentCategory.branks" :key="item.id">
          <RouterLink to="/">
            <img :src="item.picture" alt="" />
            <div class="info">
              <p class="place">
                <i class="iconfont icon-dingwei"></i>{{ item.place }}
              </p>
              <p class="name ellipsis">{{ item.name }}</p>
              <p class="desc ellipsis-2">{{ item.desc }}</p>
            </div>
          </RouterLink>
        </li>
      </ul> -->
      </div>
    </div>
  </div>
</template>

<script>
// import {
//   getCategory
// } from '@/api/nav.js'
import { getCategory } from '@/api/nav.js'
import { mapGetters } from 'vuex'
export default {
  name: 'HomeCategory',
  computed: {
    ...mapGetters(['wrapCategoryListNew'])
  },
  created () {
    // this.getCategoryData()
  },
  data () {
    return {
      flag: null,
      secondaryList: [],
      // categoryId: 828,
      categoryId: null,
      currentCategory: []
    }
  },
  watch: {
    // categoryId (n, j) {
    // 	console.log(n, j)
    // 	this.currentCategory = this.wrapCategory.filter(item => {
    // 		if (item.classifyId === n) {
    // 			return item
    // 		}
    // 	})
    // 	// console.log(this.currentCategory[0].classifyName)
    // },
    categoryId: {
      handler (id, oldVal) {
        //  console.log(oldValue)
        //  console.log(newValue)
        // 	this.currentCategory = this.wrapCategoryList.filter(item => {
        // 	if (item.classifyId === newValue) {
        // 		return item
        // 	}
        // })
        this.getCategoryData(id)
      },
      deep: true // 深度监听
    }
  },
  methods: {
    async getCategoryData (id) {
      const response = await getCategory({
        classifyId: id
      })
      console.log(response.data)
      const res = response.data
      if (res.code === '200') {
        // this.wrapCategoryList = res.data
        console.log(res.data)

        this.secondaryList = res.data
      }
    },
    jumpCategory (item) {
      // console.log(item)
      this.$router.push({
        name: 'category',
        query: {
          classifyData: JSON.stringify(item)
        }
      })
    },
    mouseenter (item) {
      console.log(item)
      this.secondaryList = item
      // 防抖
      // clearTimeout(this.flag)
      // this.flag = setTimeout(() => {
      // 	this.categoryId = item.classifyId
      // }, 150)
    }
  }
}
</script>

<style lang="scss" scoped>
.flex_box {
  display: flex;
  line-height: 30px;
  h3 {
    font-size: 12px;
    font-weight: 600;
    width: 100px;
    max-width: 130px;
  }
  .flex_box_c {
    flex: 1;
    display: flex;
    flex-wrap: wrap;

    .box_c_p {
      margin-right: 8px;
      color: #424242;
      font-size: 12px;
      // width: 150px;
      &:hover {
        color: #1f1f1f;
        // font-size: 15px;
        font-weight: 600;
      }
    }
  }
}
// @import '@/assets/styles/variables.less';
.home-category {
  position: absolute;
  top: 0;
  left: 0;
  // width: 250px;
  width: 230px;
  height: 500px;
  background: rgba(0, 0, 0, 0.7);
  position: relative;
  z-index: 999;
  scrollbar-width: none; /* Firefox隐藏滚动条 */
  -ms-overflow-style: none; /* Internet Explorer 10+隐藏滚动条 */
  ::-webkit-scrollbar {
    width: 10px; /* Safari,Chrome 隐藏滚动条 */
    height: 0; /* Safari,Chrome 隐藏滚动条 */
    display: none; /* 移动端、pad 上Safari，Chrome，隐藏滚动条 */
  }
  .menu {
    width: 230px;
    height: 100%;
    overflow: auto;
    // padding-right: 15px;
    li {
      padding-left: 40px;
      height: 40px;
      line-height: 40px;
      a:first-child {
        font-size: 14px;
      }
      a {
        margin-right: 4px;
        color: #fff;
      }
    }
    li:hover {
      background-color: #c5aa7b;
    }
  }

  &:hover {
    .layer {
      display: block;
      // box-shadow: 0px 0px 15px 0px rgba(143, 165, 167, 0.3);
    }
  }
  .layer {
    width: 1010px;
    height: 500px;
    background: rgba(255, 255, 255);
    position: absolute;
    left: 230px;
    top: 0;
    // display: block;
    display: none;
    padding: 15px;
    // padding-left: 0;
    // margin-left: 15px;
    overflow-y: auto;
    box-shadow: 0px 0px 15px 0px rgba(143, 165, 167, 0.3);
    // border: #1f1f1f 2px solid;
  }
}
</style>
